<template>
  <div class="background-photo">
   <div id="fengmian">
        <div class="text"> 
          <p style="font-size: 120px; text-shadow: 4px 4px 0px #a3cfe3, 6px 6px 0px #d2e9f3;">诗坛巨匠</p>
          <br>
           <p @click="clickDuFu" style="font-size: 52px; margin-left: 60% ;">——杜甫</p> <!-- 点击杜甫图标 -->
        </div>
    </div>
  </div>
</template>

<script>
import {useRouter} from "vue-router";
import store from "@/store";
export default {
  name: "Zero",
  setup(){
    const router =useRouter();
    const clickDuFu=( ) =>{
      store.state.isFengMian=true;
      router.push("/First");
    };
    return{
      clickDuFu,
    }
  }
};
</script>

<style scoped>
.background-photo {
  width: 100%;
  height: 100%;
  /* 设置背景图片 */
  background-image: url("@/assets/封面图.jpg");
  /* 背景图片重复方式 */
  background-repeat: no-repeat;
  /* 背景图片位置 */
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

#fengmian {
    display: flex; 
    /* justify-content: center; 
    align-items: center;  */
    height: 100vh; 
    width: 100%; 
}
.text{
  width: 50%;
 margin-top:10%;
 margin-left: 38%;
 color: rgb(73, 152, 212);
 font-family: '宋体', SimSun, sans-serif;
}
</style>
